<template>
  <form action="/">
    <van-search shape="round" v-model="value" show-action placeholder="城市/区域/位置" @search="onSearch"
      @cancel="onCancel" />
  </form>
  <van-tabs color="orange" v-model:active="active">
    <!-- <van-tab title="国内港澳台">国内港澳台</van-tab>
    <van-tab title="海外">海外</van-tab> -->
    <template v-for="(item, i) in allCity" :key="i">
      <van-tab :title="item.title">
        <CityGrop :city-date="item
        "></CityGrop>
      </van-tab>
    </template>
  </van-tabs>
</template>
<script setup>
import { ref, toRefs } from 'vue'
import CityGrop from './cnp/cityGrop.vue'
import { Toast } from 'vant';
import { useRouter } from 'vue-router';
// import { getCityAll } from '../../network/city';//我写pinia里面了
import { useCity } from '../../Pinia/modules/city'
const city = useCity()
const router = useRouter()
// 搜索栏
const value = ref('');
const onSearch = (val) => Toast(val);
const onCancel = () => {
  Toast('取消');
  router.back()
};
// tab栏切换
const active = ref(0);
// 网络请求，获取城市数据,写在这里有个缺点,就是如果其他页面需要用就需要传来传去很麻烦,所以我决定用状态管理工具来管理
// getCityAll().then(res => {
//   console.log(res);
// })
city.getCity();
let { allCity } = toRefs(city.$state)
</script>
<style scoped>
:deep(.van-icon-search:before) {
  color: orange;
}
</style>